<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./center.css" rel="stylesheet">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }   
    </style>
</head>

<body>
    <!-- template标签：用于定义组件的模板，组件使用template: "#id"的方式选择模板 -->
    <template id="plant-header">
        <header class="plant-header">
            <ul class="plant-header-nav">
                <li v-for="item in listData">
                    <a>{{item}}</a>
                </li>
            </ul>
            <a class="read-more">阅读更多</a>
        </header>
    </template>
    <main id="app">
        <div class="center-box">
            <aside class="plant-box1">
                <plant-header></plant-header>
                <section class="center-left">
                    <left-swiper></left-swiper>
                    <left-list></left-list>
                </section>
            </aside>
        </div>
    </main>
</body>
<script src="../vue.js"></script>
<script src="./center-components.js"></script>
<script>
    new Vue({
        el: "#app",
        components: {
            "left-swiper": {
                template: `
                    <figure class="view-box">
                        <ul class="image-box" :style="'transform: translate(' + transform + 'px);'">
                            <li v-for="item in images" :style="'background-image: url(' + item + ')'">
                            </li>
                        </ul>
                    </figure>
                `,
                data() {

                    let i = -2;

                    setInterval(() => {
                        let value = this.transform;
                        if (value <= -1200) {
                            i = 2;
                        } else if (value >= 0) {
                            i = -2;
                        }
                        value += i;
                        this.transform = value;
                    }, 1)

                    return {
                        images: [
                            'https://zy.forerunnercollege.com/so-165908245061359',
                            'https://zy.forerunnercollege.com/so-165908102888843',
                            'https://zy.forerunnercollege.com/so-165908036330638',
                            'https://zy.forerunnercollege.com/so-165908021249536'
                        ],
                        transform: 0,
                    }
                },
            },
            "left-list": {
                template: `
                    <ul class="left-list">
                        <li v-for="item in listData">
                            <a :title="item">{{item}}</a>
                        </li>
                    </ul>
                `,
                data() {
                    return {
                        listData: [
                            "贵州盛华职业学院第一党支部开展党风廉政教育主题党日活动",
                            "贵州盛华职业学院党委组织召开2022年第十次党委（扩大）会",
                            "贵州盛华职业学院党委召开理论学习中心组2022年第3次集中学习研讨会",
                            "贵州盛华职业学院党委组织召开 2022年第八次党委会",
                            "贵州盛华职业学院组织开展贯彻习近平 法治思想教育专题课",
                            "贵州盛华职业学院举办学习宣传贯彻省第十三次党代会精神宣讲会",
                            "贵州盛华职业学院机关第一党支部召开2021年度组织生活会",
                            "惠水县委书记郑绍峰赴我校开展党的十九届六中全会和省委十二届十次全会精神宣讲",
                            "党委书记邓维实：深入贯彻十九届六中全会精神，扎实推动学校教育高质量发展",
                            "贵州盛华职业学院召开“传承红色基因 弘扬伟大精神”专题宣讲会"
                        ]
                    }
                }
            }
        }
    })

</script>

</html>